<route lang="yaml">
  meta:
    title: 角色管理
  </route>

<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { ElMessageBox } from 'element-plus'
import { reactive, ref } from 'vue'

interface Role {
  roleId: number
  roleName: string
  status: string
}

// 表格数据
const tableData = ref<Role[]>([
  {
    roleId: 1,
    roleName: '超级管理员',
    status: '启用',
  },
  {
    roleId: 2,
    roleName: '管理员',
    status: '启用',
  },
])

// 弹窗控制
const editDialogVisible = ref(false)
const addDialogVisible = ref(false)

// 表单引用
const editFormRef = ref<FormInstance>()
const addFormRef = ref<FormInstance>()

// 表单数据
const editFormData = reactive<Role>({
  roleId: 0,
  roleName: '',
  status: '启用',
})

const addFormData = reactive<Omit<Role, 'roleId'>>({
  roleName: '',
  status: '启用',
})

// 验证规则
const rules = reactive({
  roleName: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
  ],
  status: [
    { required: true, message: '请选择状态', trigger: 'change' },
  ],
})

// 新增处理
function handleAdd() {
  addFormRef.value?.resetFields()
  addDialogVisible.value = true
}

// 编辑处理
function handleEdit(row: Role) {
  Object.assign(editFormData, row)
  editDialogVisible.value = true
}

// 删除处理
async function handleDelete(row: Role) {
  await ElMessageBox.confirm(
    `确定删除角色【${row.roleName}】吗？`,
    '删除确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )

  const index = tableData.value.findIndex(item => item.roleId === row.roleId)
  if (index > -1) {
    tableData.value.splice(index, 1)
  }
}

// 提交编辑
function submitEdit() {
  editFormRef.value?.validate((valid) => {
    if (valid) {
      const index = tableData.value.findIndex(item => item.roleId === editFormData.roleId)
      if (index > -1) {
        tableData.value.splice(index, 1, { ...editFormData })
      }
      editDialogVisible.value = false
    }
  })
}

// 提交新增
function submitAdd() {
  addFormRef.value?.validate((valid) => {
    if (valid) {
      const newId = tableData.value.length
        ? Math.max(...tableData.value.map(r => r.roleId)) + 1
        : 1

      tableData.value.push({
        roleId: newId,
        ...addFormData,
      })
      addDialogVisible.value = false
    }
  })
}
</script>

<template>
  <div>
    <FaPageMain>
      <div class="mb-4 flex justify-between">
        <div class="button-group">
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            <span class="ml-1">新增</span>
          </el-button>
        </div>
        <div class="search-wrapper" />
      </div>

      <div class="table-wrapper">
        <el-table
          :data="tableData"
          row-key="roleId"
          style="width: 100%;"
          max-height="calc(100vh - 200px)"
        >
          <el-table-column type="selection" />
          <el-table-column property="roleId" label="角色ID" />
          <el-table-column property="roleName" label="角色名称" />
          <el-table-column property="status" label="启用状态" />
          <el-table-column label="操作" width="auto">
            <template #default="{ row }">
              <div class="flex items-center">
                <el-button type="primary" link @click="handleEdit(row)">
                  <el-icon><Edit /></el-icon>
                  <span class="ml-1">编辑</span>
                </el-button>
                <el-button type="danger" link class="ml-3" @click="handleDelete(row)">
                  <el-icon><Delete /></el-icon>
                  <span class="ml-1">删除</span>
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination-wrapper mt-4" style="float: right;">
        <el-pagination
          :page-size="20"
          :pager-count="11"
          layout="prev, pager, next"
          :total="1000"
        />
      </div>
    </FaPageMain>

    <!-- 编辑弹窗 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑角色"
      width="500px"
    >
      <el-form
        ref="editFormRef"
        :model="editFormData"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="角色ID" prop="roleId">
          <el-input v-model="editFormData.roleId" disabled />
        </el-form-item>
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="editFormData.roleName" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="editFormData.status">
            <el-option label="启用" value="启用" />
            <el-option label="禁用" value="禁用" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="submitEdit">
          确认
        </el-button>
      </template>
    </el-dialog>

    <!-- 新增弹窗 -->
    <el-dialog
      v-model="addDialogVisible"
      title="新增角色"
      width="500px"
    >
      <el-form
        ref="addFormRef"
        :model="addFormData"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="addFormData.roleName" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="addFormData.status">
            <el-option label="启用" value="启用" />
            <el-option label="禁用" value="禁用" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addDialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="submitAdd">
          确认
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.table-wrapper {
  width: 100%;
  margin-top: 16px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.pagination-wrapper {
  margin-top: 16px;
}
</style>
